<template>
    <div> 
        <nav-bar :title="title"/>
        <!-- 新闻列表 -->
        <div class="demo">
            <ul>
                <li v-for="(news,index) in newsList" :key="index">
                    <router-link :to="{name:'newsDetail',params:{id:news.id}}">
                        <img class="" :src="news.img_url"/>
                        <div>
                            <span>{{news.title}}</span>
                            <div class="new-desc">
                                <p>点击数：{{news.click}}</p>
                                <p>发表时间：{{news.add_time | convertTime('YYYY-MM-DD')}}</p>
                            </div>
                        </div>
                    </router-link>
                </li>
                <li class="line"></li>
            </ul>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            title:'新闻列表',
            newsList:[],//列表数据
        }
    },
    created(){
        this.$axios.get('getnewslist')
        .then(res=>{
            this.newsList = res.data;
        })
        .catch(err=>{
            console.log(err);
        })
    }
}
</script>
<style scoped>
.demo img {
    float: left;
    width: 42px;
    height: 42px;
    margin-right: 20px;
}
.demo a div {
    float: left;
    width: 238px;
    margin-right: 20px;
}
.demo span{
    display: block;
    width: 100%;
    font-size: 17px;
    line-height: 21px;
}
.demo a p{
    float: left;
    color: #0bb0f5;
    font-size: 14px;
    line-height: 21px;
}
.demo p:nth-child(2){
    float: right;
}
.cms-s-header{
    background-color: #f7f7f7;
}
.tmpl h1{
    display: inline-block;
}
.page-title{
    margin-left: 25%;
}
.line{
    margin-left: 16px;
    transform: scaleY(.5);
    border-bottom: 1px solid #c8c7cc;
}
.demo ul{
    padding: 0;
}
.news-desc{
    height:35px;
}
</style>
